<template>
	<navbar title="购物车" :isBack="true"></navbar>
	<view class="" style="padding: 20rpx 30rpx;">
		<view style="margin-bottom: 24rpx;">
			<u-swipe-action :show="item.show" :index="index" v-for="(item, index) in list" :key="item.id" @click="click"
				@open="open" :options="options" btn-width="120" style="border-radius: 20rpx;">
				<view class="" style="padding: 20rpx;display:flex;">
					<u-checkbox-group size="40" icon-size="30" active-color="#5062A7"
						style="display: flex;align-items: center;margin-left: 10rpx;">
						<u-checkbox v-model="item.checked" shape="circle" @change="checkBoxChnage"></u-checkbox>
					</u-checkbox-group>

					<view class="" style="display: flex;">
						<view class="">
							<image :src="item.image" style="width: 180rpx;height: 180rpx;border-radius: 10rpx;" mode="">
							</image>
						</view>
						<view class=""
							style="margin-left: 28rpx;height: 180rpx;display: flex;flex-direction: column;justify-content: space-between;width: 100%;">
							<view class="ellipsis-1" style="">
								{{item.name}}
							</view>
							<view class=""
								style="padding: 10rpx;background-color: #F3F4F4;align-items: center;display: flex;width: 300rpx;border-radius: 6rpx;">
								<view class="" style="font-size: 20rpx;color: #747474;margin-right: 10rpx;">
									{{item.specs}}
								</view>

							</view>
							<view class=""
								style="width: 100%;display: flex;justify-content: space-between;align-items: center;">
								<view class="" style="color: #E83F3F;font-weight: bold;">
									<span style="font-size: 20rpx;">￥</span>
									<span style="font-size:32rpx">{{item.goods_price}}</span>
								</view>
								<view class="">
									<view class="" style="display: flex;align-items: center;">
										<view class="" @tap="addNum(0,item)"
											style="width: 40rpx;height: 40rpx;background-color: #F3F4F4;border-radius: 10rpx;display: flex;justify-content: center;align-items: center;color: #9A9A9A;">
											<view class=""
												style="width: 18rpx;height: 1rpx;border-bottom: 4rpx solid #666666;">

											</view>
										</view>
										<view class="" style="margin: 0 30rpx;">
											{{item.num}}
										</view> 
										<view class="" @tap="addNum(1,item)"
											style="width: 40rpx;height: 40rpx;background-color: #E83F3F;border-radius: 10rpx;display: flex;justify-content: center;align-items: center;color: white;font-size: 36rpx;padding-bottom: 6rpx;">
											+
										</view>
									</view>
									
								</view>
							</view>
						</view>
					</view>
				</view>
			</u-swipe-action>
		</view>
	</view>
	<view class=""
		style="position: absolute;bottom: 0;width: 100%;background-color: white;padding: 20rpx 30rpx 40rpx 50rpx;display: flex;justify-content: space-between;align-items: center;">

		<u-checkbox-group active-color="#5062A7">
			<u-checkbox v-model="checkAll" shape="circle" size="40" icon-size="30" @change="checkAllChange">
				<view class="" style="margin-left: 10rpx;">
					<span>合计：</span>
					<span style="font-size: 20rpx;color: #E83F3F;font-weight: bold;">￥</span>
					<span style="font-size:36rpx;color: #E83F3F;font-weight: bold;">{{totalPrice.toFixed(2)}}</span>
				</view>
			</u-checkbox>
		</u-checkbox-group>
		<view class="" @tap="submit"
			style="width: 296rpx;height: 88rpx;border-radius: 10rpx;background: linear-gradient( 90deg, #5062A7 0%, #354678 100%);color: white;display: flex;justify-content: center;align-items: center;font-size: 32rpx;">
			结算
		</view>
	</view>
</template>

<script setup lang="ts">
	import { onLoad, onShow } from '@dcloudio/uni-app'
	import { ref, nextTick, onMounted } from 'vue'
	import { shopCart, shopCartSetNum } from '@/service/api/shop'
	import tools from '@/utils/tools'
	const number = ref(0)
	const list = ref([
	])
	const totalPrice = ref(0)
	const checkAll = ref(false)
	const checkArr = ref([])
	const options = ref([

		{
			text: '删除',
			style: {
				backgroundColor: '#dd524d',
				backgroundImage: 'https://img.icons8.com/ios-glyphs/30/ffffff/hand-drawn-star.png',
				backgroundSize: 'cover'

			}
		}
	])
	onLoad(() => {
		getData()

	})
	onMounted(() => {
		console.log(123);
	})
	const getData = async () => {
		const res = await shopCart('');
		list.value = res.msg;
		list.value.forEach((item : any) => {
			item['show'] = true;
			item['checked'] = false
		})
		console.log(res);
	}
	const open = (index : number) => {
		list.value[index].show = true;
		list.value.map((val, idx) => {
			if (index != idx) list.value[idx].show = false;
		})
	}
	//计数
	const addNum = async(val, item) => {
		//0是减 1是加
		console.log(item);
		if (val == 0) {
			if(item.num == 1){
				
				return
			}
			item.num--
		} else {
			item.num++
		}
		let param = {
			id: item.id,
			num: item.num
		}
		const res = await shopCartSetNum(param);
		console.log(res);
		nextTick(() => {
			costPrice()
		})
	}
	// const numberBoxChange = (item) => {

	// 	let param = {
	// 		id: item.id,
	// 		num: item.num
	// 	}
	// 	shopCartSetNum(param).then((res) => {
	// 		console.log(res);

	// 	});
	// 	console.log(item);


	// 	nextTick(() => {
	// 		costPrice()
	// 	})
	// }
	//计算价格
	const costPrice = () => {
		totalPrice.value = 0;

		list.value.forEach((item : any) => {
			if (item.checked) {
				totalPrice.value += item.goods_price * item.num;
				console.log(totalPrice.value);
			}
		})
	}
	//单个选中
	const checkBoxChnage = () => {

		nextTick(() => {
			checkAll.value = list.value.every(item => {

				return item.checked
			});

			costPrice()
		})

	}
	//全选
	const checkAllChange = () => {
		checkAll.value = !checkAll.value;
		if (checkAll.value) {
			list.value.forEach((item : any) => {
				item.checked = true
			})
			number.value = list.value.length;
		} else {
			list.value.forEach((item : any) => {
				item.checked = false
			})
			number.value = 0;
		}
		nextTick(() => {
			costPrice()
		})
	}
	//结算
	const submit = () => {
		// cart_ids
		let cart_ids = []
		list.value.forEach((item : any) => {
			if (item.checked) {
				cart_ids.push(item.id);
			}
		})
		if (cart_ids.length <= 0) {
			tools.showToast('请选择商品')
			return
		}
		tools.navTo('/pagesB/goods/confirmOrder?cart_ids=' + JSON.stringify(cart_ids));
	}
</script>

<style scoped lang="scss">
	.ellipsis-1 {
		// 注意，不要设置此标签的高度，下方代码设置了行数，会自动根据行数进行计算高度的。

		//文本超出部分以...形式展示
		text-overflow: -o-ellipsis-lastline;
		//整体超出部分隐藏
		overflow: hidden;
		//文本超出部分以...形式展示，同第一行样式代码
		text-overflow: ellipsis;
		//display 块级元素展示
		display: -webkit-box;
		//设置文本行数为2行
		-webkit-line-clamp: 1;
		//设置文本行数为2行
		line-clamp: 1;
		//从上到下垂直排列子元素（设置伸缩盒子的子元素排列方式）
		-webkit-box-orient: vertical;

	}

	:deep(.u-swipe-action) {
		border-radius: 20rpx !important;
		margin-bottom: 20rpx;
	}
</style>

<style>
	page {
		background: #F5F6F8
	}
</style>